<template>
  <div id="iframes"></div>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router'
  const route = useRoute()

  const url = ref('')

  const toiFraime = (n: string) => {
    const dom = document.getElementById('iframes') as HTMLElement
    const iframe = document.createElement('iframe')
    url.value = (n as string) || 'https://coc-console.huaweicloud.com/ecm/?region=cn-north-4&locale=zh-cn#/ecs/manager/vmList'
    iframe.src = `https://auth.huaweicloud.com/authui/saml/login?xAccountType=COC_hwstaff_y30007935_sdbp02&isFirstLogin=false&service=${encodeURIComponent(
      url.value
    )}`
    iframe.setAttribute('frameborder', 'none')
    iframe.setAttribute('style', 'width: calc(100vw - 350px); height: calc(100vh - 170px)')
    dom.innerHTML = ''
    dom.append(iframe)
  }

  nextTick(() => {
    if (route.query.url) {
      toiFraime(route.query.url as string)
    } else {
      toiFraime('https://coc-console.huaweicloud.com/ecm/?region=cn-north-4&locale=zh-cn#/ecs/manager/vmList')
    }
  })

  watch(
    () => route.query.url,
    (n) => {
      toiFraime(n as string)
    }
  )
</script>
